import { useScroll } from 'ahooks'
import { useEffect, useRef } from 'react'

type Crach = ()=>void

export function useScrollLoad(onCrash:Crach , onScroll?:Crach) {

  const app = document.querySelector<HTMLDivElement>(".App")

  const scroll = useScroll(()=> app);

  useEffect(() => {
    if (app) {
      const scrollHeight = app.scrollHeight || 0
      const scrollTop = scroll?.top || 0;
      const offsetHeight = app.offsetHeight || 0;
      if (scrollHeight === offsetHeight) {
        return
      }
      if (scrollTop + offsetHeight >= scrollHeight) {
        onCrash()
      } 
    }

    onScroll && onScroll()
    
  }, [scroll])

  return 
}